<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./reviews/js/zepto.min.js"></script>
    <script src='./reviews/js/touch.min.js'></script>
    <script src="./reviews/js/fx.js"></script>
    <title>Document</title>
    <style>
        .jd_banner .banner_imgs {
            width: 1000%;
            transform: translateX(-10%);
            transition: all .3s;
        }
        
        .jd_banner .banner_imgs li {
            width: 10%;
        }
        
        .jd_banner .banner_imgs li a {
            display: block;
            width: 100%;
        }
        
        .jd_banner .banner_imgs li a img {
            width: 100%;
            display: block;
        }
        
        .jd_banner .banner_index {
            position: absolute;
            bottom: 5px;
            left: 50%;
            margin-left: -48px;
        }
        
        .jd_banner .banner_index li {
            /* 所有li的通用样式 */
            width: 6px;
            height: 6px;
            border-radius: 3px;
            border: 1px solid white;
            margin: 0 3px;
        }
        
        .jd_banner .banner_index li.current {
            /* 当li标签 拥有 .current的时候 会使用该样式 */
            background-color: white;
        }
    </style>
</head>

<body>
    <!--  轮播的图片 -->

    <ul class="banner_imgs clearfix">

        <li class="f_l">
            <a href="#"><img src="./reviews/img/test1.png" alt=""></a>
        </li>

        <li class="f_l">
            <a href="#"><img src="./reviews/img/test2.png" alt=""></a>
        </li>

        <li class="f_l">
            <a href="#"><img src="./reviews/img/test3.png" alt=""></a>
        </li>

    </ul>

    <!-- 索引的 li标签 -->


    <ul class="banner_index clearfix">


        <li class="f_l"></li>


        <li class="f_l"></li>


        <li class="f_l"></li>

    </ul>
</body>
<script>
    $(function() {

        //自动轮播

        //第一步获取一些必要的值比如说索引，屏幕宽度，移动的ul

        //和下面小圆点的index

        var index = 1;

        var width = $('body').width();

        var moveUl = $('.banner_imgs');

        var index_li = $('.banner_index li');

        //封装ul移动的方法

        var animateMoveUl = function() {

            moveUl.animate({

                "transform": "translate(" + index * width * -1 + "px)"

            }, 300, "ease", function() {

                if (index >= 9) {

                    　　　　
                    index = 1;

                    moveUl.css({
                        "transiton": "none",
                        "transform": "translate(" + index * width * -1 + "px)"
                    });

                } else if (index <= 0) {　　　　　　
                    index = 8;
                    moveUl.css({
                        "transiton": "none",
                        "transform": "translate(" + index * width * -1 + "px)"
                    });
                } //修改index的值
                index_li.removeClass('current').eq(index - 1).addClass('current'); //判断timeId的值如果为undefined说明我们干掉了计时器这是要重新开启定时器
                if (timeId == undefined) {　　　　
                    timeId = setInterval(function() {
                        index++;
                        animateMoveUl();
                    }, 1000);
                }
            });
        }; //定时器自动轮播
        var timeId = setInterval(function() {
            //对index进行累加 
            index++;
            //调用移动ul的方法 
            animateMoveUl();
        }, 1000); //左右滑动的右滑动
        moveUl.swipeRight(function() {
            clearInterval(timeId); //这里要记住尽管计时器清楚了但是timeId一直都在 timeId=undefined;
            index--; //调用移动ul的方法 
            animateMoveUl();
        });
        moveUl.swipeLeft(function() {
            clearInterval(timeId); //这里要记住尽管计时器清楚了但是timeId一直都在 timeId=undefined; 
            index++; //调用移动ul的方法 
            animateMoveUl();
        });
    });
</script>

</html>